<template>
  <!-- 进度条 -->
  <div class="progress-main progress-main-xuan">
    <div v-for="(item, index) in progressList" :key="index" class="area-table-item-list">
      <img src="" alt="" />
      <div class="item-1" :class="'top' + index">
        <span><i style="font-sizi: 12px; font-style: normal">NO.</i>{{ index + 1 }}</span>
        <el-tooltip :content="item.name">
          <span class="lineName">{{ item.name }}</span>
        </el-tooltip>
      </div>
      <div class="item-2">
        <el-progress
          class="app-progress progress-main-blue"
          :class="'progress-top' + index"
          :percentage="item.value"
          :stroke-width="10"
          :show-text="false"
          :color="getProgressColor(index)"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PrgressList',
  props: {
    searchData: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      count: 0,
      progressList: [
        { name: '嬴政', value: 20 },
        { name: '赵高', value: 40 },
        { name: '赵姬', value: 60 },
        { name: '卫子夫', value: 80 },
        { name: '司马懿', value: 100 },
        { name: '宰相', value: 90 },
      ],
    };
  },
  watch: {
    searchData(val) {
      this.progressList = this.searchData;
    },
  },
  methods: {
    getProgress(item) {
      if (this.count === 0) {
        return 0;
      }
    },
    // 进度条颜色
    getProgressColor(index) {
      const colorList = ['red', 'yellow', 'green'];
      if (index >= colorList.length) {
        return '#2a387d';
      }
      return colorList[index];
    },
  },
};
</script>
<style lang="scss" scoped>
.progress-main .progress-main-xuan {
  padding: 0;
  height: 85%;
  width: 95%;
  display: flex;
  .area-table-item-list {
    display: flex;
    margin: 5px 0;
  }
  [class*='top'] {
    color: lightgray;
  }
  .top0 {
    color: #fc7c7c;
  }
  .top1 {
    color: #c39939;
  }
  .top2 {
    color: #2ea7b5;
  }
  .item-1 {
    flex: 1;
    width: 35%;
    margin-right: 5px;
    span {
      margin-right: 10px;
    }
  }
  .lineName {
    color: #727883;
    font-size: 14px;
    font-weight: 400;
  }
  .item-2 {
    width: 45%;
    flex: 1;
  }
}
// ::v-deep .el-progress {
//     &.app-progress {
//         .el-progress {
//             &-bar {

//             }
//         }
//     }
// }
</style>
